<template>
  <div class="home">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card class="mt16">
      <!-- Form -->
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加</el-button
      >
      <el-dialog
        title="添加用户"
        :visible.sync="dialogFormVisible"
        @open="getlist"
        @close="qk"
      >
        <el-form :model="form" :rules="rules" ref="add">
          <el-form-item
            label="分类名称"
            :label-width="formLabelWidth"
            prop="cat_name"
          >
            <el-input v-model="form.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父类" :label-width="formLabelWidth">
            <el-cascader
              :options="user"
              @change="sel"
              :props="{
                value: 'cat_id',
                label: 'cat_name',
                checkStrictly: true
              }"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div> </el-dialog
      ><br /><br />
      <el-table
        :data="user"
        border
        style="width: 100%"
        row-key="cat_id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cat_deleted" label="显示状态">
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              style="color: #00cc00"
              v-show="scope.row.cat_deleted == false"
            ></i>
            <i class="el-icon-error" v-show="scope.row.cat_deleted"></i>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level" label="分类层级">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.cat_level == 0">等级一</el-tag>
            <el-tag type="success" v-show="scope.row.cat_level == 1"
              >等级二</el-tag
            >
            <el-tag type="warning" v-show="scope.row.cat_level == 2"
              >等级三</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="edit(scope.row)"
              type="primary"
              size="small"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
    </el-card>
  </div>
</template>

<script>
import { getcate } from '@/http/api.js'
import { addcate } from '@/http/api.js'
export default {
  data() {
    return {
      dialogFormVisible: false,
      shuju: {
        pagenum: 1,
        pagesize: 4
      },
      count: 0,
      form: {
        cat_name: '',
        cat_pid: 0,
        cat_level: 0
      },
      rules: {
        cat_name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      user: [],
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    //   渲染全部数据
    async getlist() {
      const res = await getcate()
      console.log('分类列表', res)
      this.user = res
    },
    // 三级联动
    sel(data) {
      console.log('这是分类页面的三级联动', data)
      this.form.cat_pid = data[data.length - 1]
      this.form.cat_level = data.length
    },
    // 添加
    add() {
      this.$refs['add'].validate(async (valid) => {
        if (valid) {
          const res = await addcate(this.form)
          console.log('添加的分类', res)
          this.dialogFormVisible = false
          this.getlist()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清空输入框的内容
    qk() {
      this.form = {
        cat_pid: 0, //父类父ID
        cat_name: '', //分类名称
        cat_level: 0 //分类层级
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
}
</style>
